<template>
  <view class="time_range_bar_box">

    <!-- 顶部信息 -->
    <view class="info">

      <!-- 类型描述 -->
      <view
        class="left"
        :class="{ overdueBack: stateEnumEnd, }" >
        {{ props.description }}
      </view>

      <!-- 标题 -->
      <view
        class="msg"
        :class="{
          overdueColor: stateEnumEnd,
          overdueTitle: stateEnumEnd,
        }"
      >
        {{ props.title }}
      </view>

      <!-- 当前状态 -->
      <view
        class="status"
        :class="{
          overdueBack: stateEnumEnd,
        }"
      >
        {{ getEnumValue(props.status) }}
      </view>
    </view>


    <!-- 时间信息 -->
    <view class="time">
      <uni-icons type="calendar-filled" size="20" />
      <view
        class="info"
        :class="{
          overdueColor: stateEnumEnd,
        }"
      >
        {{ props.time }}
      </view>
    </view>
  </view>
</template>

<!-- 活动时间标题组件 -->
<script lang="ts" setup>
import {
  ActivitySateEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'
import { ref } from 'vue'

/**
 * 接受父组件参数
 * @param title: 标题
 */
const props = defineProps({
  /**
   * 标题
   */
  title: {
    type: String,
    default: '',
  },
  /**
   *描述
   */
  description: {
    type: String,
    default: '',
  },
  /**
   * 时间
   */
  time: {
    type: String,
    default: '',
  },
  /**
   * 状态
   */
  status: {
    type: Number,
    default: 1,
  },
})

//活动结束状态
const stateEnumEnd = ref(checkStateEnum(props.status, ActivitySateEnum.ENDED))

</script>

<style scoped lang="scss">
.time_range_bar_box {
  width: 100%;
  .info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 42rpx;
      font-size: 24rpx;
      background-color: rgb(240, 135, 24);
      border-radius: 22rpx;
      color: $uni-bg-color;
    }

    .msg {
      width: calc(100% - 294rpx);
      white-space: nowrap;
      overflow: hidden;
      font-size: 30rpx;
      padding-left: 14rpx;
      text-overflow: ellipsis;
      font-weight: 800;
    }

    .status {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 140rpx;
      height: 50rpx;
      font-size: 26rpx;
      margin-left: 40rpx;
      background-color: rgb(240, 135, 24);
      border-radius: 10rpx;
      border-top-left-radius: 25rpx;
      border-bottom-left-radius: 25rpx;
      color: $uni-bg-color;
    }
  }

  .time {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .info {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      font-size: 26rpx;
      padding-left: 10rpx;
      text-overflow: ellipsis;
    }
  }

  .overdueColor {
    color: rgb(131, 128, 128) !important;
  }
  .overdueBack {
    background-color: rgb(186, 181, 181) !important;
  }
  .overdueTitle {
    color: rgb(85, 83, 83) !important;
  }
}
</style>
